<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<style>

</style>
<body>
<div id="app">
    <template>
        <el-card style="background-color: #f7f7f7">
            <el-form :model="queryForm" ref="queryForm" :inline="true">
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input clearable
                              size="small"
                              @keyup.enter.native="handleQuery" v-model="queryForm.menuName" placeholder="菜单名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">清空</el-button>
                </el-form-item>
            </el-form>
        </el-card>


        <el-row style="margin-top: 1%">
            <el-col :span="1.5">
                <el-button type="primary"
                           icon="el-icon-plus"
                           size="mini" v-if="button.add" @click="handleAdd">新增
                </el-button>

                <el-button type="warning"
                           icon="el-icon-s-fold"
                           size="mini" @click="expandTable">{{expandName}}
                </el-button>
            </el-col>
        </el-row>


        <el-table
                v-loading="loading"
                v-if="refreshTable"
                :default-expand-all="expandStatus"
                :data="tableData" row-key="id"
                :header-cell-style="{'text-align':'center','color':'#303133','font-weight':'600','background-color': '#F5F7FA'}"
                :cell-style="{'text-align':'center'}" border style="margin-top: 10px">
            <el-table-column prop="menuName" label="菜单名称">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                    {{ scope.row.menuName }}
                </template>

            </el-table-column>


            <el-table-column prop="menuType" label="类型">
                <template slot-scope="scope">
                    <el-tag
                            effect="dark" type="success" v-if="scope.row.menuType===1">
                        目录
                    </el-tag>

                    <el-tag
                            effect="dark" type="warning" v-else-if="scope.row.menuType===2">
                        菜单
                    </el-tag>
                    <el-tag
                            effect="dark" type="info" v-else>
                        按钮
                    </el-tag>
                </template>

            </el-table-column>
            <el-table-column prop="url" label="URL">
                <template slot-scope="scope">
                    <span v-if="scope.row.url" type="success" size="small">{{scope.row.url}}</span>
                    <span v-else>#</span>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button v-if="button.add" size="mini" type="primary" icon="el-icon-plus" @click="handleAdd(scope.row)">新增
                    </el-button>
                    <el-button v-if="button.update"  size="mini" type="primary" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
                    </el-button>
                    <el-button v-if="button.delete" size="mini" type="info" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/menu.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                button: {
                    add: true,
                    update: false,
                    delete: false
                },
                // 重新渲染表格的状态
                refreshTable: true,
                expandName: "展开",
                expandStatus: false,
                loading: false,
                queryForm: {
                    menuName: ''
                }
            }
        },
        created() {
            this.handleQuery();
            let sysButtons = JSON.parse(localStorage.getItem("mars-sysButtons"));
            this.button.add = sysButtons.indexOf("sys/menu/add") > -1;
            this.button.update = sysButtons.indexOf("sys/menu/update") > -1;
            this.button.delete = sysButtons.indexOf("sys/menu/delete") > -1;
        },
        methods: {
            expandTable() {
                this.expandStatus = !this.expandStatus
                this.expandName = "折叠"
                this.refreshTable = false;
                this.$nextTick(() => {
                    this.refreshTable = true;
                });
            },
            resetQuery() {
                this.queryForm = {}
                this.handleQuery()
            },
            handleQuery() {
                let queryParam = {
                    menuName: this.queryForm.menuName
                };
                this.loading = true
                pageList(queryParam).then((res) => {
                    if (res.code === '200') {
                        this.loading = false
                        this.tableData = res.data;
                    }
                });
            },
            handleDelete(row) {
                deleteById('/sys/menu/delete/' + row.id, this);
            },
            handleAdd(row) {
                if (row.id) {
                    openPage('新增菜单', '/system/sysMenu/menuAdd.html?parentId=' + row.id, this);
                } else {
                    openPage('新增菜单', '/system/sysMenu/menuAdd.html', this);
                }
            },
            handleUpdate(row) {
                openPage('修改菜单', '/system/sysMenu/menuUpdate.html?id=' + row.id, this);
            }
        }
    });
</script>
</html>
